<template >
	<view  >
		<u-row justify="space-between">

			<u-col span="6">
				<view class="demo-layout bg-purple" style="display: flex;">
					<text style="color: #FFFFFF;">人数</text>
					<uni-number-box v-model="userNum" :min="2" :max="50"  background="#870d0d" color="#ffffff" />
				</view>
			</u-col>

			<u-col span="3">
				<text style="color: #FFFFFF;">{{pngArr.length-(pngIndex+1)}}/{{pngArr.length}} 张</text>
			</u-col>

			<u-col span="3">
				<view class="demo-layout bg-purple" style="display: flex;">
					<text style="color: #FFFFFF;">音频</text>
					<u-switch v-model="playOpen" size="20" activeColor="#870d0d" inactiveColor="rgb(50, 60, 60)" ></u-switch>
				</view>
			</u-col>

		</u-row>

		<view class="content">
			<text> 点击扑克牌翻下一张 </text>
		</view>
		<view class="content">
			<u--image  :animation="animationData" :showLoading="true" :src="pokerPath" width="500rpx" height="650rpx" @click="flip"></u--image>
			<u-row justify="space-between">
				<u-col span="6">
					<view class="demo-layout bg-purple-light">
						<u-button
							color="#870d0d"
							icon-color="#870d0d"
							text="记录"
							size="normal"
							shape="circle"
							@click="showLog"
						></u-button>
					</view>
				</u-col>
				<u-col span="6">
					<view class="demo-layout bg-purple">
						<u-button
							color="#870d0d"
							icon-color="#870d0d"
							text="洗牌"
							size="normal"
							shape="circle"
							@click="shuffle"
						></u-button>
					</view>
				</u-col>
			</u-row>
			<text style="font-size: 60rpx;"> {{pokerTitle}} </text>
			<text> {{pokerDesc}}  </text>
		</view>



		<u-toast ref="uToast"></u-toast>

		<u-modal :show="show" :title="title"  @confirm="show=false" @click="show=false" >
			<scroll-view  class="scroll-Y" scroll-y="true" show-scrollbar="true" scroll-with-animation bindscroll="onScroll" >
			   <view  v-for="(item,index) in logs" :key="index">
					<u-divider :text="item.time" :dashed="true" :hairline="true" ></u-divider>
					<view style="display: flex;align-items: center;">
						<text style="font-size: 40rpx;">{{item.userNo}}号玩家 抽到 [{{item.pokerVal}}] {{item.pokerTitle}}</text>
						<view>
							<u-button color="#870d0d" icon-color="#870d0d" size="small"  @click="useCard(item)" v-if="item.status==1">使用</u-button>
							<u-button  size="small"  v-if="item.status==2">已使用</u-button>
						</view>
					</view>
				</view>
			</scroll-view>
		</u-modal>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				pngArr:[0,1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51],
				pokerTitleArr:["老大牌","小姐牌","逛三园","PK牌","照相机","顺口溜","逢7过","厕所牌","自饮牌","神经病","左边喝","右边喝","定量牌"],
				pokerDescArr:[
				"可以指定在场任意一名成员喝酒，指定后失效"
				,"拿到2的成员化身为“小姐”，当场上有人喝酒时，可以叫“小姐何在”。“小姐”需要说“大爷喝好”并且喝下和对方相同的酒。直到下一张“小姐牌”出现为止。"
				," 需要自罚一杯。"
				,"抽到此牌的人，可以任意指定1人跟他PK游戏。pk的规则由抽到牌的人规定，输赢条件也由抽到牌的人规定。"
				,"抽到此牌的人，可以随时喊“照相机”，在场所有人需保持动作不能动，保持静止3-5秒。可以在抽到牌时留存，不立即使用，只能使用一次。谁动需要罚酒一杯。没人动，自罚一杯。"
				,"抽到此牌的人，大喊“几棵柳树扭几扭”，其他玩家依次向下顺着说几棵柳树扭几扭。说错的、数喊错的、发音不标准的，都需要自罚一杯。"
				,"抽到此牌的人可以喊一个数，其他玩家依次向下加一。但是遇到含7的或是7的倍数的需要喊过。喊错的自罚一杯。"
				,"抽到此牌的人才能上厕所，否则上厕所罚三杯，使用后失效。"
				,"抽到此牌的人需要自罚一杯。"
				,"抽到此牌的人需要大喊“我是神经病”，所有人不得接话，直到下一张“神经病牌”出现或是有人接话为止。和“神经病”说话的人需要自罚一杯。如果到下一张“神经病牌出现都没人”接话则抽到牌的人自罚一杯。"
				,"抽到此牌的人左边的玩家需要罚一杯。"
				,"抽到此牌的人右边的玩家需要罚一杯。"
				,"抽到此牌的人需要指定杯数，下一个抽到K的人喝指定杯数的酒。"
				],
				pngIndex:-1,
				pokerVal: 0,
				pokerSkillArr: [5,8,10],
				pokerTitle:"",
				pokerDesc:"",
				userNum:6,
				userNo:0,
				isNegative:true,
				negativeOpen:true,
				logs:[],
				back:"https://bigfire.cn/image/mpoker/back.png",
				pokerPath:"https://bigfire.cn/image/mpoker/back.png",
				animationData:{},
				show:false,
				showQuestion:false,
				title:"记录",
				content:"内容",
				playOpen:true,
				isFlipped: true
			}
		},
		onLoad(param) {
			// this.userNum = param.userNum
			this.shuffleArray(this.pngArr)
		},
		onShow: function(){

		},
		methods: {
			// 自定义分享配置
			onShareAppMessage() {
			  return {
				title: '金陵十三钗',
				path: '/pages/play', // 分享后跳转的页面路径
				imageUrl: '/static/logo.png', // 分享时的图片路径，支持网络图片和本地图片
			  };
			},
			shuffleArray(array) {
			  return array.sort(() => Math.random() - 0.5);
			},
			shuffle(){//重新洗牌
				this.pngIndex = -1
				this.shuffleArray(this.pngArr)

				this.pokerTitle = ""
				this.pokerDesc = ""
				this.pokerPath = this.back

				if(this.playOpen) {
					const innerAudioContext = uni.createInnerAudioContext();
					innerAudioContext.src = 'https://bigfire.cn/sub/winetable/mp3/xi.mp3'
					innerAudioContext.play()
				}
			},
			log(){
				let log = {
					time: this.dateStr(),
					userNo: this.userNo,
					pokerVal: this.pokerVal,
					pokerTitle: this.pokerTitle,
					status: this.pokerSkillArr.includes(this.pokerVal) ? 1 : 0
				}
				// console.log("牌:",this.pokerVal,"是否道具牌:",this.pokerSkillArr.includes(this.pokerVal))
				this.logs.push(log)

				if(this.logs.length>52){//最多记录52张牌，防止疯狂加内存
					this.logs.shift()
				}
			},
			showLog(){
				if(this.logs.length>0){
					this.show = true;
					// console.log(this.logs)
				}else{
					this.$refs.uToast.show({message:"暂无记录"})
				}
			},
			onScroll(event) {
			  const { scrollTop, scrollHeight } = event.detail;
			  const percent = (scrollTop / scrollHeight) * 100;
			  this.$refs.scrollBar.setPercent(percent);
			},
			flip(){
				// this.isNegative = !this.isNegative
				// if(!this.isNegative){
				// 	//翻牌
				// } else {
				// 	this.negative()
				// }
				// this.rotateAndScale()
				this.pngIndex++;
				if(this.pngIndex < 52){
					this.userNo++;
					if(this.userNo > this.userNum){
						this.userNo = 1
					}
					let pngNum = this.pngArr[this.pngIndex]
					let pokerNum = pngNum % 13
					let pokerTitle = this.pokerTitleArr[pokerNum]
					let pokerDesc = this.pokerDescArr[pokerNum]
					this.pokerVal = pokerNum + 1
					// console.log("pngNum:",pngNum,"pokerNum:",pokerNum,"pokerTitle:",pokerTitle,"pokerDesc",pokerDesc,",pokerVal:",this.pokerVal)
					this.pokerTitle = pokerTitle
					this.pokerDesc = pokerDesc
					this.pokerPath = "https://bigfire.cn/image/mpoker/"+(pngNum)+".png"
					if(this.playOpen) {
						const innerAudioContext = uni.createInnerAudioContext();
						innerAudioContext.src = 'https://bigfire.cn/sub/winetable/mp3/'+pokerNum+'.mp3'
						innerAudioContext.play()
					}
					this.isFlipped = !this.isFlipped;
					this.log()

				} else {
					this.shuffle()
				}
			},
			useCard(item){
				item.status = 2
			},
			negative(){
				this.pokerTitle = ""
				this.pokerDesc = ""
				this.pokerPath = this.back
			},
			dateStr(date){
				if(!date || date instanceof date){
					date = new Date();//如果传入为空就取当前时间
				}
				const hour = String(date.getHours()).padStart(2, '0');
				const minute = String(date.getMinutes()).padStart(2, '0');
				const second = String(date.getSeconds()).padStart(2, '0');
				const formattedDate = `${hour}点${minute}分${second}秒`;// 输出: 格式化后的日期和时间字符串，例如 "2023-10-20 20:30:56"
				return formattedDate;

			}
		}
	}
</script>

<style>

	.flip {
	  transform-style: preserve-3d;
	  transition: transform 0.5s ease-in-out;
	}

	.flip.flipped {
	  /* transform: rotateY(180deg); */
	  transform: skew(30deg, -10deg);
	}

	.uni-page-head {
	    color: #0000ff;
	  }
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #ffffff;
	}

	.scroll-Y {
		height: 500rpx;
	}
</style>
